<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>角色男女人数统计</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
    <style>
        .top-panel {
            border: 1px solid #eceff9;
            border-radius: 5px;
            text-align: center;
        }
        .top-panel > .layui-card-body{
            height: 60px;
        }
        .top-panel-number{
            line-height:60px;
            font-size: 30px;
            border-right:1px solid #eceff9;
        }
        .top-panel-tips{
            line-height:30px;
            font-size: 12px
        }
    </style>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<!---统计不同角色的男女人数 -->
<div id="main" style="width: 600px;height:400px;"></div>

<script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['layer', 'echarts'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            echarts = layui.echarts;
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        option = {
            title: {
                text: '角色男女生人数'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {},
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.5]//从0开始每个格子占10
            },
            yAxis: {
                type: 'category',
                data: []
            },
            series: [
                {
                    name: '男生人数',
                    type: 'bar',
                    data: []
                },
                {
                    name: '女生人数',
                    type: 'bar',
                    data: []
                }
            ]
        };
        //请求后端数据ajax
        $.getJSON("/statistics/findBar", "", function (resultData) {//响应成功的回调函数
            if (resultData.code == 0) {
                var data=resultData.data;
                var rolename_Arr=new Array(data.length);
                var woman_Arr=new Array(data.length);
                var man_Arr=new Array(data.length);
                // 前端要求格式：3个集合或数组
                // 角色信息:['学生','家长','教师']
                // 女生人数:[1,2,3]
                // 男生人数:[2,2,3]
                for(var i=0;i<data.length;i++){
                    rolename_Arr[i] = data[i].rolename;
                    man_Arr[i] = data[i].man;
                    woman_Arr[i] = data[i].woman;
                }
                //赋值
                option.yAxis.data=rolename_Arr;
                option.series[0].data=man_Arr;
                option.series[1].data=woman_Arr;
            } else {
                layer.msg(resultData.msg);
            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        })
    });
</script>
</body>
</html>